<script setup lang="tsx">
import { getCardTotalAmtApi, getMemberCardBillListApi } from '@/api/financial'
import { memberCardListApi } from '@/api/merchantManagement'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useTable } from '@/hooks/web/useTable'
import { hasPermission as hasPermis } from '@/components/Permission/src/utils'

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await getMemberCardBillListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list || [],
      total: res.data.total || 0
    }
  }
})
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList } = tableMethods

const totalAmt = ref<any>({})
const getTotalAmt = async () => {
  if (!hasPermis('GET /memberCardBill/getTotalAmt')) {
    return false
  }
  const res = await getCardTotalAmtApi()
  totalAmt.value = res.data
  console.log(totalAmt.value)
}

getTotalAmt()

const getMemberCardList = async () => {
  if (!hasPermis('GET /memberCard/page')) {
    allSchemas.tableColumns.at(1)!.hidden = true
    allSchemas.searchSchema.at(1)!.hidden = true
    return []
  }
  const res = await memberCardListApi({
    pageNum: 1,
    pageSize: 9999
  })
  return res.data.list?.map((v) => ({
    label: v.cardName,
    value: v.id
  }))
}
const memberCardList = ref<any>([])
const getMemberCardListData = async () => {
  if (!hasPermis('GET /memberCard/page')) {
    return false
  }
  memberCardList.value = await getMemberCardList()
}
getMemberCardListData()

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'id',
    label: 'ID',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      hidden: true
    }
  },
  {
    field: 'orderNo',
    label: '购买编号',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      width: 220
    }
  },
  {
    field: 'businessName',
    label: '商家名称',
    search: {
      componentProps: {
        placeholder: '请输入商家名称'
      }
    },
    form: {
      hidden: true
    },
    table: {
      hidden: true
    }
  },
  {
    field: 'cardId',
    label: '次卡类型',
    search: {
      component: 'Select',
      optionApi: async () => getMemberCardList()
    },
    table: {
      slots: {
        default: (data: any) => {
          const row = data.row as any
          const memberCard = memberCardList.value.find((item) => item.value === row.cardId)
          return (
            <>
              <div>{memberCard?.label}</div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'cardCost',
    label: '次卡费用',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'businessName',
    label: '购买商家',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      width: 500
    }
  },
  {
    field: 'returnNo',
    label: '第三方支付流水号',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'payTime',
    label: '购买时间',
    search: {
      component: 'DatePicker',
      componentProps: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    },
    form: {
      hidden: true
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const searchParams = ref({})
const setSearchParams = (params: any) => {
  const { payTime, ...rest } = params
  let payTimeStart, payTimeEnd
  if (payTime && payTime.length > 0) {
    payTimeStart = payTime[0]
    payTimeEnd = payTime[1]
  }
  currentPage.value = 1
  searchParams.value = {
    payTimeStart,
    payTimeEnd,
    ...rest
  }
  getList()
}
</script>

<template>
  <div class="flex w-100% h-100%">
    <ContentWrap class="flex-[3] ml-20px">
      <div
        v-hasPermi="'GET /memberCardBill/getTotalAmt'"
        style="background: rgb(24 144 255 / 16.9%)"
        class="flex p-10px mb-4 text-14px font-bold"
      >
        <div>累计成交金额：{{ totalAmt }}</div>
      </div>
      <Search
        :schema="allSchemas.searchSchema"
        @reset="setSearchParams"
        @search="setSearchParams"
      />
      <Table
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :columns="allSchemas.tableColumns"
        :data="dataList"
        :loading="loading"
        @register="tableRegister"
        :pagination="{
          total
        }"
      />
    </ContentWrap>
  </div>
</template>
